<template>
  <!-- 有 tooltip 的情况 -->
  <span v-if="tooltip" :title="tooltip" class="v-icon-wrapper">
    <!-- 有固定背景大小或宽高时，使用容器包装 -->
    <div v-if="hasFixedBgSize" :class="containerClass" :style="containerStyle"
         @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <svg :class="svgClass" :style="iconStyle" aria-hidden="true">
        <use :xlink:href="iconName" :fill="effectiveColor"/>
      </svg>
    </div>
    <!-- 没有固定背景大小时，直接使用 SVG -->
    <svg v-else :class="svgClass" :style="svgStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"
         aria-hidden="true">
      <use :xlink:href="iconName" :fill="effectiveColor"/>
    </svg>
  </span>

  <!-- 没有 tooltip 的情况 -->
  <template v-else>
    <!-- 有固定背景大小或宽高时，使用容器包装 -->
    <div v-if="hasFixedBgSize" :class="containerClass" :style="containerStyle"
         @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <svg :class="svgClass" :style="iconStyle" aria-hidden="true">
        <use :xlink:href="iconName" :fill="effectiveColor"/>
      </svg>
    </div>
    <!-- 没有固定背景大小时，直接使用 SVG -->
    <svg v-else :class="svgClass" :style="svgStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"
         aria-hidden="true">
      <use :xlink:href="iconName" :fill="effectiveColor"/>
    </svg>
  </template>
</template>

<script setup>
import {computed, ref} from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#323639CC'
  },
  // 整体大小调整
  size: {
    type: [String, Number],
    default: ''
  },
  // 宽度调整
  width: {
    type: [String, Number],
    default: ''
  },
  // 高度调整
  height: {
    type: [String, Number],
    default: ''
  },
  // 旋转动画
  spin: {
    type: Boolean,
    default: false
  },
  // 动画速度控制
  speed: {
    type: [String, Number],
    default: 1
  },
  // 角度控制
  rotate: {
    type: [String, Number],
    default: undefined
  },
  // 翻转控制
  flip: {
    type: String,
    default: undefined,
    validator(value) {
      return value === undefined || value === 'h' || value === 'v';
    }
  },
  // 鼠标样式
  cursor: {
    type: String,
    default: undefined
  },
  // 悬浮背景色
  hoverBgColor: {
    type: String,
    default: undefined
  },
  // 悬浮时图标颜色
  hoverColor: {
    type: String,
    default: undefined
  },
  // 悬浮背景圆角大小
  hoverBgRadius: {
    type: [String, Number],
    default: undefined
  },
  // 悬浮背景大小调整（像素值）
  hoverBgAddSize: {
    type: [String, Number],
    default: undefined
  },
  // 鼠标悬浮提示文字
  tooltip: {
    type: String,
    default: undefined
  },
  // 悬浮时图标缩放（正数放大，负数缩小）
  hoverScale: {
    type: [String, Number],
    default: undefined
  },
  // 悬浮背景固定大小
  hoverBgSize: {
    type: [String, Number],
    default: undefined
  },
  // 悬浮背景固定宽度
  hoverBgWidth: {
    type: [String, Number],
    default: undefined
  },
  // 悬浮背景固定高度
  hoverBgHeight: {
    type: [String, Number],
    default: undefined
  }
});

const iconName = computed(() => `#icon-${props.name}`);
const isHovered = ref(false);

// 悬浮时的图标颜色（优先用 hoverColor，其次用常规 color）
const effectiveColor = computed(() => {
  return isHovered.value && props.hoverColor ? props.hoverColor : props.color;
});


// 将数字或仅由数字组成的字符串标准化为带单位的 CSS 长度（默认 px）
const normalizeSize = (val) => {
  if (val === undefined || val === null || val === '') return undefined;
  if (typeof val === 'number') return `${val}px`;
  if (typeof val === 'string') {
    const trimmed = val.trim();
    // 纯数字或小数，如 "32"、"16.5" => 转换为 px
    if (/^[0-9]+(\.[0-9]+)?$/.test(trimmed)) return `${trimmed}px`;
    // 其他包含单位/表达式的值直接返回
    return trimmed;
  }
  return val;
};

const svgClass = computed(() => {
  const classes = [];
  if (props.className) {
    classes.push(props.className);
  }
  if (props.spin) {
    classes.push('icon-spin');
  }
  return classes.join(' ');
});

// 判断是否有固定背景大小
const hasFixedBgSize = computed(() => {
  return props.hoverBgSize !== undefined ||
      props.hoverBgWidth !== undefined ||
      props.hoverBgHeight !== undefined;
});

const containerClass = computed(() => {
  return 'v-icon-container';
});

// 容器样式（背景和占位）
const containerStyle = computed(() => {
  const style = {};

  // 设置容器的固定大小（实际占位）
  if (hasFixedBgSize.value) {
    // 优先级：独立宽高 > 统一大小
    if (props.hoverBgWidth !== undefined) {
      style.width = normalizeSize(props.hoverBgWidth);
    } else if (props.hoverBgSize !== undefined) {
      style.width = normalizeSize(props.hoverBgSize);
    }

    if (props.hoverBgHeight !== undefined) {
      style.height = normalizeSize(props.hoverBgHeight);
    } else if (props.hoverBgSize !== undefined) {
      style.height = normalizeSize(props.hoverBgSize);
    }

    // 设置为行内块级元素，支持宽高设置
    style.display = 'inline-flex';
    style.alignItems = 'center';
    style.justifyContent = 'center';
    style.position = 'relative';
    // 防止容器被挤压，确保设置的宽高生效
    style.flexShrink = '0';
    style.minWidth = style.width;
    style.minHeight = style.height;
  }

  // 处理鼠标样式
  if (props.cursor !== undefined) {
    style.cursor = props.cursor;
  }

  // 处理悬浮背景色
  if (props.hoverBgColor !== undefined && isHovered.value) {
    style.backgroundColor = props.hoverBgColor;
  }

  // 处理悬浮背景圆角
  if (props.hoverBgRadius !== undefined && isHovered.value) {
    style.borderRadius = normalizeSize(props.hoverBgRadius);
  }

  // 处理悬浮背景扩展（使用 box-shadow）
  if (props.hoverBgAddSize !== undefined && isHovered.value) {
    const sizeValue = parseFloat(props.hoverBgAddSize);
    const bgColor = props.hoverBgColor || 'rgba(0, 0, 0, 0.1)';
    style.boxShadow = `0 0 0 ${sizeValue}px ${bgColor}`;
  }

  return style;
});

// 图标样式（只控制图标本身）
const iconStyle = computed(() => {
  const style = {};

  // 图标大小控制
  if (props.size) {
    style.width = typeof props.size === 'number' ? `${props.size}px` : props.size;
    style.height = typeof props.size === 'number' ? `${props.size}px` : props.size;
  }
  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
  }
  if (props.height) {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
  }

  // 处理旋转
  if (props.rotate !== undefined) {
    style.transform = `rotate(${props.rotate}deg)`;
  }

  // 处理翻转
  if (props.flip !== undefined) {
    if (props.flip === 'h') {
      style.transform = style.transform ? `${style.transform} scale(-1, 1)` : 'scale(-1, 1)';
    } else if (props.flip === 'v') {
      style.transform = style.transform ? `${style.transform} scale(1, -1)` : 'scale(1, -1)';
    }
  }

  // 处理悬浮缩放
  if (props.hoverScale !== undefined && isHovered.value) {
    const scaleValue = parseFloat(props.hoverScale);
    const finalScale = 1 + scaleValue;
    const scaleTransform = `scale(${finalScale})`;
    style.transform = style.transform ? `${style.transform} ${scaleTransform}` : scaleTransform;
  }

  // 处理动画速度
  if (props.spin && props.speed) {
    const duration = `${1 / parseFloat(props.speed)}s`;
    style.animationDuration = duration;
  }

  return style;
});

// 原有的 SVG 样式（用于没有固定背景大小的情况）
const svgStyle = computed(() => {
  const style = {};

  // 图标大小控制
  if (props.size) {
    style.width = typeof props.size === 'number' ? `${props.size}px` : props.size;
    style.height = typeof props.size === 'number' ? `${props.size}px` : props.size;
  }
  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
  }
  if (props.height) {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
  }

  // 处理旋转
  if (props.rotate !== undefined) {
    style.transform = `rotate(${props.rotate}deg)`;
  }

  // 处理翻转
  if (props.flip !== undefined) {
    if (props.flip === 'h') {
      style.transform = style.transform ? `${style.transform} scale(-1, 1)` : 'scale(-1, 1)';
    } else if (props.flip === 'v') {
      style.transform = style.transform ? `${style.transform} scale(1, -1)` : 'scale(1, -1)';
    }
  }

  // 处理悬浮缩放
  if (props.hoverScale !== undefined && isHovered.value) {
    const scaleValue = parseFloat(props.hoverScale);
    const finalScale = 1 + scaleValue;
    const scaleTransform = `scale(${finalScale})`;
    style.transform = style.transform ? `${style.transform} ${scaleTransform}` : scaleTransform;
  }

  // 处理动画速度
  if (props.spin && props.speed) {
    const duration = `${1 / parseFloat(props.speed)}s`;
    style.animationDuration = duration;
  }

  // 处理鼠标样式
  if (props.cursor !== undefined) {
    style.cursor = props.cursor;
  }

  // 处理悬浮背景色、圆角和大小（仅在没有固定背景大小时）
  if (props.hoverBgColor !== undefined && isHovered.value) {
    // 如果有扩展大小，使用 box-shadow 同时实现背景色和扩展
    if (props.hoverBgAddSize !== undefined) {
      const sizeValue = parseFloat(props.hoverBgAddSize);
      style.boxShadow = `0 0 0 ${sizeValue}px ${props.hoverBgColor}`;
      style.backgroundColor = props.hoverBgColor;
    } else {
      // 只有背景色，没有扩展
      style.backgroundColor = props.hoverBgColor;
    }
  } else if (props.hoverBgAddSize !== undefined && isHovered.value) {
    // 只有扩展大小，没有指定背景色，使用默认颜色
    const sizeValue = parseFloat(props.hoverBgAddSize);
    const defaultBgColor = 'rgba(0, 0, 0, 0.1)';
    style.boxShadow = `0 0 0 ${sizeValue}px ${defaultBgColor}`;
    style.backgroundColor = defaultBgColor;
  }

  if (props.hoverBgRadius !== undefined && isHovered.value) {
    style.borderRadius = normalizeSize(props.hoverBgRadius);
  }

  return style;
});

const handleMouseEnter = () => {
  isHovered.value = true;
};
const handleMouseLeave = () => {
  isHovered.value = false;
};
</script>

<style>
svg path {
  fill: inherit !important;
}

.icon-spin {
  animation: icon-spin infinite linear;
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.v-icon-wrapper {
  display: inline-block;
  line-height: 0;
}

/* 固定背景大小的容器样式 */
.v-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease 0.15s;
  /* 圆角延迟消失：悬浮时立即出现，离开时等背景色消失后再消失 */
  /* 防止容器被挤压 */
  flex-shrink: 0;
  box-sizing: border-box;
}

/* 容器悬浮时圆角立即出现，无延迟 */
.v-icon-container:hover {
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-radius 0s ease;
}

/* SVG 悬浮动画效果（用于没有固定背景大小的情况） */
svg {
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease 0.15s, transform 0.15s ease;
  /* 圆角延迟消失：悬浮时立即出现，离开时等背景色消失后再消失 */
  /* transform 缩放有平滑过渡 */
}

/* 悬浮时圆角立即出现，无延迟 */
svg:hover {
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-radius 0s ease, transform 0.15s ease;
}

/* 在容器内的 SVG 只需要 transform 过渡 */
.v-icon-container svg {
  transition: transform 0.15s ease;
}
</style>